<script setup>
import {ref} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";
import router from "@/router/index.js";

const props = defineProps(["jwtToken","isShow"])

const passwordForm = ref({
  passwordInput:"",
  passwordInputCheck: "",
})

const passOk = () => {
  if (passwordForm.value.passwordInput === passwordForm.value.passwordInputCheck) {
    passChange();
  } else {
    ElMessage({
      message: '两次密码输入不一致！',
      type: 'error',
      duration: 2000,
    })
  }
}

const passNo = () => {
  props.isShow = false
  ElMessage({
    message: '取消修改密码',
    type: 'warning',
    duration:  1000,
  })
}

const passChange = () =>{
  let formData = new FormData();
  formData.append('password', passwordForm.value.passwordInputCheck);
  formData.append('jwt_token', props.isShow);
  const config = {
    method: 'put',
    url: '/mupdate/password',
    baseURL: 'http://localhost:8080',
    data: formData
  }
  async function submitChangePass(){
    await axios(config)
        .then((response) => {
          console.log(response)
          ElMessage({
            message: '密码修改成功！',
            type: 'success',
            duration: 2000,
          })
          router.push("/login")
        })
        .catch((error) => {
          console.log(error)
          ElMessage({
            message: '密码修改失败！',
            type: 'error',
            duration: 2000,
          })
        })
  }
  submitChangePass()
}
</script>

<template>
  <el-dialog v-model=props.isShow title="修改密码" width="500">
    <el-form v-model="passwordForm">
      <el-form-item label="请输入新密码" >
        <el-input v-model="passwordForm.passwordInput" autocomplete="off" />
      </el-form-item>
      <el-form-item label="请确认密码" >
        <el-input v-model="passwordForm.passwordInputCheck" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="passNo">取消</el-button>
        <el-button type="primary" @click="passOk">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">

</style>